<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>student</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.6.8/css/layui.css">
</head>
<body>


<form  method="get" id="searchStudent">
    <p>查找的id: <input type="text" name="sno"  class="layui-input" style="width: 150px;border-color: black"/></p>
    <input type="button" id="search" value="查找" class="layui-btn layui-btn-primary"/>
</form>

<div id="sr" hidden>
<label>sno:</label><span id="ssno"></span><br>
<label>sname:</label><span id="ssname"></span><br>
<label>ssex:</label><span id="sssex"></span><br>
<label>sage:</label><span id="ssage"></span><br>
<label>sdept:</label><span id="ssdept"></span><br>
<label>sclass:</label><span id="ssclass"></span><br>
<label>stelephone:</label ><span id="sstelephone"></span><br>
</div>




<form method="get" id="deleteStudent">
    <p>删除的id: <input type="text" name="sno" class="layui-input" style="width: 150px;border-color: black"/></p>
    <input type="button" id="delete" value="删除" class="layui-btn layui-btn-primary"/>
</form>


<div id="dr" hidden>
    <label>message:</label><span id="dmessage"></span><br>
</div>

<form  method="get" id="addStudent">
    <p>姓名: <input type="text" name="sname"  class="layui-input" style="width: 150px;border-color: black"/></p>
    <p>性别: <input type="text" name="ssex"  class="layui-input" style="width: 150px;border-color: black"/></p>
    <p>年龄: <input type="text" name="sage"  class="layui-input" style="width: 150px;border-color: black"/></p>
    <p>系别: <input type="text" name="sdept"  class="layui-input" style="width: 150px;border-color: black"/></p>
    <p>班级: <input type="text" name="sclass"  class="layui-input" style="width: 150px;border-color: black"/></p>
    <p>电话: <input type="text" name="stelephone"  class="layui-input" style="width: 150px;border-color: black"/></p>
    <input type="button" id="add" value="添加"  class="layui-btn layui-btn-primary"/>
</form>



<div id="ar" hidden>
    <label>sno:</label><span id="asno"></span><br>
    <label>sname:</label><span id="asname"></span><br>
    <label>ssex:</label><span id="assex"></span><br>
    <label>sage:</label><span id="asage"></span><br>
    <label>sdept:</label><span id="asdept"></span><br>
    <label>sclass:</label><span id="asclass"></span><br>
    <label>stelephone:</label ><span id="astelephone"></span><br>
</div>

<form  method="get" id="updateStudent">
    <p>id: <input type="text" name="sno" class="layui-input" style="width: 150px;border-color: black"/></p>
    <p>姓名: <input type="text" name="sname" class="layui-input" style="width: 150px;border-color: black"/></p>
    <p>性别: <input type="text" name="ssex" class="layui-input" style="width: 150px;border-color: black"/></p>
    <p>年龄: <input type="text" name="sage" class="layui-input" style="width: 150px;border-color: black"/></p>
    <p>系别: <input type="text" name="sdept" class="layui-input" style="width: 150px;border-color: black"/></p>
    <p>班级: <input type="text" name="sclass" class="layui-input" style="width: 150px;border-color: black"/></p>
    <p>电话: <input type="text" name="stelephone" class="layui-input" style="width: 150px;border-color: black"/></p>
    <input type="button" id="update" value="更新" class="layui-btn layui-btn-primary"/>
</form>

    <div id="ur" hidden>
<label>sno:</label><span id="usno"></span><br>
<label>sname:</label><span id="usname"></span><br>
<label>ssex:</label><span id="ussex"></span><br>
<label>sage:</label><span id="usage"></span><br>
<label>sdept:</label><span id="usdept"></span><br>
<label>sclass:</label><span id="usclass"></span><br>
<label>stelephone:</label ><span id="ustelephone"></span><br>
    </div>



<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script>
        layui.use(['layer', 'jquery'], function() {
            var layer = layui.layer //获得 layer 模块
                , $ = layui.jquery; //获得 jquery 模块
            $("#search").click(function () {
                $.get("[[@{student/selectOne}]]", $("#searchStudent").serialize(),
                    function (data) {
                        $("#ssno").text(data.sno);
                        $("#ssname").text(data.sname);
                        $("#sssex").text(data.sclass);
                        $("#ssage").text(data.sage);
                        $("#sssdept").text(data.sdept);
                        $("#ssclass").text(data.sclass);
                        $("#sstelephone").text(data.stelephone);
                        layer.open({
                            type: 1,
                            content: $('#sr')
                        });
                    });
            })


            $("#delete").click(function () {
                $.get("[[@{student/deleteOne}]]", $("#deleteStudent").serialize(),
                    function (data) {
                        $("#dmessage").text(data);
                        layer.open({
                            type: 1,
                            content: $('#dr')
                        });
                    });
            })

            $("#add").click(function () {
                $.get("[[@{student/addOne}]]", $("#addStudent").serialize(),
                    function (data) {
                        $("#asno").text(data.sno);
                        $("#asname").text(data.sname);
                        $("#assex").text(data.sclass);
                        $("#asage").text(data.sage);
                        $("#asdept").text(data.sdept);
                        $("#asclass").text(data.sclass);
                        $("#astelephone").text(data.stelephone);
                        layer.open({
                            type: 1,
                            content: $('#ar')
                        });
                    });
            })


            $("#update").click(function () {
                $.get("[[@{student/updateOne}]]", $("#updateStudent").serialize(),
                    function (data) {
                        $("#usno").text(data.sno);
                        $("#usname").text(data.sname);
                        $("#ussex").text(data.sclass);
                        $("#usage").text(data.sage);
                        $("#usdept").text(data.sdept);
                        $("#usclass").text(data.sclass);
                        $("#ustelephone").text(data.stelephone);
                        layer.open({
                            type: 1,
                            content: $('#ur')
                        });
                    });
            })
        })
</script>

</body>
</html>